import React, { Component } from 'react'
import PropTypes from 'prop-types'
import HighComponent from './HighComponent'
import getDefaultOption from '../GenOptions'
class Template extends Component {
  componentDidMount() {
    const echart = this.update()
    this.props.callback(echart)
  }
  componentDidUpdate(preProps, preState) {
    const { unit } = this.props
    if (unit !== preProps.unit) {
      this.update(true)
    }
    this.update(false)
  }
  update = (flag) => {
    const { echart, unit, start, end } = this.props

    const { result: { dates, maxTemp, minTemp, historyMaxTemp, historyMinTemp, historyMaxAvgTemp, historyMinAvgTemp } } = this.props
    
    echart.setOption(
      {...getDefaultOption(unit ? '温度(°C)' : '温度(°F)',
        ['当日最高', '当日最低', '历史最高', '历史最低', '历史最高平均', '历史最低平均'],
        dates,
        [
          {
            name: '当日最高',
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#ff6633',
                lineStyle: {
                  width: 1,
                  color: '#ff6633',
                },
              }
            },
            data: maxTemp
              // .map(temp =>!!temp ? (temp) : temp)
              .map(temp => (!!temp && !unit) ? (temp * 1.8 + 32) : temp),
            // .map(temp => Number(temp))
            // .map(temp => unit ? Math.round(temp) : Math.round(temp * 1.8 + 32)),
          },
          {
            name: '当日最低',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#006600',
                lineStyle: {
                  width: 1,
                  color: '#006600',
                }
              }
            },
            data: minTemp
              .map(temp => (!!temp && !unit) ? (temp * 1.8 + 32).toFixed() : temp),
            // .map(temp => (temp))
            // .map(temp => unit ? (temp) : (temp * 1.8 + 32)),
          },
          {
            name: '历史最高',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#990066',
                lineStyle: {
                  width: 1,
                  color: '#990066',
                }
              }
            },
            data: historyMaxTemp
              .map(temp => (!!temp && !unit) ? (temp * 1.8 + 32).toFixed() : temp),// .map(temp => (temp))
            // .map(temp => unit ? (temp) : (temp * 1.8 + 32)),
          },
          {
            name: '历史最低',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#003300',
                lineStyle: {
                  width: 1,
                  color: '#003300',
                }
              }
            },
            data: historyMinTemp
              .map(temp => (!!temp && !unit) ? (temp * 1.8 + 32).toFixed() : temp),// .map(temp => (temp))
            // .map(temp => unit ? (temp) : (temp * 1.8 + 32)),
          },
          {
            name: '历史最高平均',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#996633',
                lineStyle: {
                  width: 1,
                  color: '#996633',
                }
              }
            },
            data: historyMaxAvgTemp
              .map(temp => (!!temp && !unit) ? (temp * 1.8 + 32).toFixed() : temp),// .map(temp => (temp))
            // .map(temp => unit ? (temp) : (temp * 1.8 + 32)),
          },
          {
            name: '历史最低平均',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3399cc',
                lineStyle: {
                  width: 1,
                  color: '#3399cc',
                }
              }
            },
            data: historyMinAvgTemp
              .map(temp => (!!temp && !unit) ? (temp * 1.8 + 32).toFixed() : temp),
            // .map(temp => (temp))
            // .map(temp => unit ? (temp) : (temp * 1.8 + 32)),
          },
        ],
        function (value) {
          return value
          // return unit ? `${value}°C` : `${value}°F`
        } 
        , false, 80, flag
      ),
      legend: {
        data: ['当日最高', '当日最低', '历史最高', '历史最低', '历史最高平均', '历史最低平均'],
        selected: {
          '历史最高': false,
          '历史最低': false,
          '历史最高平均': false,
          '历史最低平均': false,
          //不想显示的都设置成false
        }
      },
      dataZoom: {
        type: 'slider',
        show: false,
        xAxisIndex: [0],
        disabled: true,
        start,
        end,
      },
      })
    return echart
  }
  render() {
    return (
      null
    )
  }
}

Template.propTypes = {
  result: PropTypes.object,
  echart: PropTypes.object,
  unit: PropTypes.bool,
  callback: PropTypes.func,
  start: PropTypes.number,
  end: PropTypes.number,
}

export default HighComponent(Template, 'temperature')